<template>
	<div class="comments">
		<!--{{commentId}}-->
		<div>
			<h4>提交评论</h4>
			<p></p>
			<textarea placeholder="请输入评论的内容" v-model="userInputStr"></textarea>
			<mt-button type="primary" @click="postComment" size="large">发表</mt-button>
		</div>

		<div id="comtentsList">
			<h3>评论列表<span class="countsTitle">（共<span class="counts">{{total}}</span>条评论）</span></h3>
			<p class="p"></p>
			<div v-for="(items,index) in commentList">
				<div class="title">
					<span>第{{index + 1}}楼:</span>
					<span>用户：{{items.user_name}}</span>
					<span>发表时间：{{items.pubTime | dateFmt('YYYY-MM-DD HH:mm:ss')}}</span>
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">{{items.contents}}</li>
				</ul>
			</div>

		</div>

		<mt-button @click="loadingMore" type="primary" size="large" plain>加载更多</mt-button>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';

	import common from '../../ajaxReqKits/common.js';
	export default {
		name: 'comment',
		props: ['commentId'],
		data() {
			return {
				total: 0,
				pageIndex: 0,
				status: 0,
				userInputStr: '',
				commentList: []
			}
		},
		created() {
			this.getCommentsList(this.pageIndex);
		},
		methods: {
			postComment() {
				var url = common.apiReqPath + '/api/saveComments.jsp';
				var _this = this;

				if(this.userInputStr.trim().length == 0) {
					Toast({
						message: "请输入内容后再发表哦！",
						position: 'middle',
						duration: 1000
					});
					return;
				}

				this.$ajax.get(url, {
						params: {
							id: this.commentId,
							contents: this.userInputStr
						}
					})
					.then(function(response) {
						_this.status = response.data;
						if(response.data.status == "1") {
							Toast({
								message: "发表成功",
								position: 'bottom',
								duration: 1000
							});
							_this.commentList = [{
								"newsid": _this.commentId,
								"contents": _this.userInputStr,
								"pubTime": new Date,
								"cid": _this.commentId
							}].concat(_this.commentList);
							_this.userInputStr = '';
							_this.total++;
						} else {
							Toast({
								message: "发表失败，请稍后再试",
								position: 'bottom',
								duration: 1000
							});
						}

					})
					.catch(function(error) {
						console.log(error);
					});
			},

			getCommentsList(pageindex) {
				this.pageIndex = pageindex || 1;
				var url = common.apiReqPath + '/findCommentsList.jsp';
				var _this = this;
				this.$ajax.get(url, {
						params: {
							id: this.commentId,
							pageIndex: _this.pageIndex
						}
					})
					.then(function(response) {
						_this.commentList = _this.commentList.concat(response.data.lists);
						_this.total = response.data.total;
					})
					.catch(function(error) {
						console.log(error);
					});
			},

			loadingMore() {
				var isEnd = Math.ceil(this.total / 5);
				this.pageIndex++;
				if(this.pageIndex > isEnd) {
					this.pageIndex++;
					Toast({
						message: "没有更多啦",
						position: 'bottom',
						duration: 1000
					});
				} else {
					this.getCommentsList(this.pageIndex);
				}
			}
		}
	}
</script>

<style scoped>
	.comments {
		padding: 5px;
		font-family: "微软雅黑";
	}
	
	.comments p {
		height: 1px;
		border-bottom: 1px solid #d9d9d9;
	}
	
	.countsTitle{font-size: 16px;;}
	.counts {
		font-size: 16px;
		color: red;
	}
</style>